<template>
  <div>
    <div class="frame-header">
      <span>管理中心</span>
    </div>
    <div class="table-wrapper pl27">
      <table class="table text-center">
        <thead>
          <tr>
            <th></th>
            <th class="sort cur">今日</th>
            <th class="sort cur">本周</th>
            <th class="sort cur">本月</th>
            <th class="sort cur">本年</th>
            <th class="sort cur">去年</th>
            <th class="sort cur">累计</th>
            <th class="sort cur">待审核</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <p>
                <b>用户注册</b>
              </p>
            </td>
            <td>
              <p>200</p>
            </td>
            <td>
              <p>300</p>
            </td>
            <td>
              <p>400</p>
            </td>
            <td>
              <p>30000</p>
            </td>
            <td>
              <p>60000</p>
            </td>
            <td>
              <p>12000</p>
            </td>
            <td>
              <p>12</p>
            </td>
          </tr>
          <tr class="info">
            <td>
              <p>
                <b>商户注册</b>
              </p>
            </td>
            <td>
              <p>200</p>
            </td>
            <td>
              <p>300</p>
            </td>
            <td>
              <p>400</p>
            </td>
            <td>
              <p>30000</p>
            </td>
            <td>
              <p>60000</p>
            </td>
            <td>
              <p>12000</p>
            </td>
            <td>
              <p>12</p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                <b>用户订单</b>
              </p>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr class="info">
            <td>
              <p>
                <b>消费金额</b>
              </p>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td>
              <p>
                <b>短信通知</b>
              </p>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td>
              <p>
                <b>点评次数</b>
              </p>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr class="info">
            <td>
              <p>
                <b>留言条数</b>
              </p>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td>
              <p>
                <b>预付笔数</b>
              </p>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr class="info">
            <td>
              <p>
                <b>取消笔数</b>
              </p>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td>
              <p>
                <b>退款笔数</b>
              </p>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="table-message clearfix">
      <div style="overflow: hidden">
        <div class="table-message-list clearfix">
          <div class="list-title clearfix">
            <p>
              <img
                src="http://demo.mxyhn.xyz:8020/cssthemes6/1.14ZF04/img/icon_message.png"
                alt=""
                width="18"
                height="15"
              />
              微信公众号
            </p>
            <a href="">更多>></a>
          </div>
          <div class="list-cont clearfix">
            <ul>
              <li>
                <a href="">[2018-10-08] 说明书明明是什么模式吗什么？</a>
              </li>
              <li>
                <a href="">[2018-10-08] 说明书明明是什么模式吗什么？</a>
              </li>
              <li>
                <a href="">[2018-10-08] 说明书明明是什么模式吗什么？</a>
              </li>
              <li>
                <a href="">[2018-10-08] 说明书明明是什么模式吗什么？</a>
              </li>
              <li>
                <a href="">[2018-10-08] 说明书明明是什么模式吗什么？</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="table-message-list clearfix" style="margin-right: 0">
          <div class="list-title clearfix">
            <p>
              <img
                src="http://demo.mxyhn.xyz:8020/cssthemes6/1.14ZF04/img/icon_message.png"
                alt=""
                width="18"
                height="15"
              />
              商户通知
            </p>
            <a href="">更多>></a>
          </div>
          <div class="list-cont clearfix">
            <ul>
              <li>
                <a href="">[2018-10-08] 说明书明明是什么模式吗什么？</a>
              </li>
              <li>
                <a href="">[2018-10-08] 说明书明明是什么模式吗什么？</a>
              </li>
              <li>
                <a href="">[2018-10-08] 说明书明明是什么模式吗什么？</a>
              </li>
              <li>
                <a href="">[2018-10-08] 说明书明明是什么模式吗什么？</a>
              </li>
              <li>
                <a href="">[2018-10-08] 说明书明明是什么模式吗什么？</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import { ref, toRefs, reactive, watch, onUnmounted, onMounted } from "vue";
var timer = null;
export default {
  name: "listofusers",
  setup() {
    const myform = ref();
    const state = reactive({
      form: {},
    });

    return {
      myform,
      ...toRefs(state),
    };
  },
};
</script>



<style lang="scss" scoped>
.qqq {
  width: 192px;
  display: flex;
}
.frame-header {
  padding: 0 27px;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  color: #feb900;
  font-weight: 700;
  span {
    display: inline-block;
    padding-right: 50px;
  }
}
.table-wrapper.pl27 {
  min-width: 790px;
  padding-left: 27px;
}
.table-wrapper {
  width: 100%;
  padding: 0 27px 0 0;
  .table {
    font-size: 16px;
    margin: 0;
    border-bottom: 1px solid #c8c8c8;
    border-top: 1px solid #c8c8c8;
    position: relative;
    thead {
      tr {
        th {
          width: 80px;
          background: url(http://demo.mxyhn.xyz:8020/cssthemes6/1.14ZF04/img/table-th-bg.png);
          border-bottom: none;
          height: 52px;
          vertical-align: middle;
        }
      }
    }
    td {
      height: 47px;
      vertical-align: middle;
      border-top: none;
      p {
        color: #343434;
        margin: 0 0 10px;
      }
    }
  }
}
b {
  font-weight: 700;
}
.table {
  width: 100%;
  max-width: 100%;
}
.table > tbody > tr > td {
  padding: 8px;
  line-height: 1.42857143;
}
.text-center {
  text-align: center;
}
.info {
  background-color: rgb(243, 242, 242);
}
.table > tbody + tbody {
  border-top: 2px solid #ddd;
}

.table-message {
  width: 100%;
  padding: 20px 27px 40px;
  .table-message-list {
    width: 48%;
    float: left;
    margin-right: 2%;
    overflow: hidden;
    .list-title {
      height: 48px;
      line-height: 48px;
      padding: 0 15px;
      background-image: linear-gradient(-180deg, #fcfcfc 0%, #f8f8f8 100%);
      border: 1px solid #d6d6d6;
      border-top: 2px solid #ff7200;
      p {
        float: left;
        font-size: 16px;
        color: #343434;
        img {
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }
      }
      a {
        float: right;
        font-size: 14px;
        color: #228fdf;
      }
    }
    .list-cont {
      width: 100%;
      border: 1px solid #d6d6d6;
      text-align: left;
      border-top: none;
      ul {
        width: 100%;
        overflow: hidden;
        padding-bottom: 10px;
      }
      li {
        height: 30px;
        line-height: 30px;
        text-align: left;
        padding-left: 15px;
        a {
          font-size: 14px;
          color: #6b6b6b;
        }
      }
    }
  }
}
p {
  margin: 0 0 10px;
}
</style>